<template>
  <svg-icon
    :name="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
    @click="handleClick"
  />
</template>
<script setup lang="ts">
import { ElMessage } from "element-plus/es";
import screenfull from "screenfull";

// 是否全屏
let isFullscreen = ref(false);

// 点击全屏
const handleClick = () => {
  // 浏览器是否允许全屏模式
  if (screenfull.isEnabled) {
    screenfull.toggle();
    return;
  }
  return ElMessage.warning("你的浏览器不支持全屏！");
};

// 更新当前全屏状态 根据状态切换对应图标
const onChange = () => {
  isFullscreen.value = screenfull.isFullscreen;
};

// 监听全屏变化事件
const init = () => {
  if (screenfull.isEnabled) {
    screenfull.on("change", onChange);
  }
};

onMounted(() => {
  init();
});
</script>
<style lang="scss" scoped>
.svg-icon {
  cursor: pointer;
}
</style>
